<template>
  <div class="login">
    <div class="register-box">
      <h3 style="text-align: center">注册</h3>
      <el-form ref="registerForm" label-position="top" :model="registerForm" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="register-btn" type="primary" @click="register()">注册</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {login} from "../../api/user";

export default {
  name: "index",
  data() {
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
    };
    const checkPass = (rule, value, callback) => {
      if (!value)
        return callback(new Error('密码不能为空'))
    }
    const checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
    }
    return {
      registerForm: {
        username: '',
        password: '',
        email: ''
      },
      rules: {
        username: [{
          validator: checkUsername, trigger: 'blur'
        }],
        password: [{
          validator: checkPass, trigger: 'blur'
        }],
        email: [{
          validator: checkEmail, trigger: 'blur'
        }]
      }
    }
  },
  methods:{
    register(){
      console.log(this.registerForm)
      this.$store.dispatch('user/register', this.registerForm).then((response) => {
          this.$message.success('注册成功!!!')
          this.$router.push('/')
      }).catch(err => this.$message.error(err))
    }
  }
}
</script>

<style scoped>
.login {
  /*min-height: 50vh;*/
  margin: 35px 0;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
}

.register-box {
  width: 400px;
}

.register-btn {
  float: right;
}

.register-btn::after {
  content: '';
  display: block;
  clear: both;
}
</style>
